<template>
  <page-header-wrapper>
    <a-spin :spinning='spinning'>
      <a-card :bordered='false'>
        <a-tooltip title='刷新'>
          <a-icon type='reload' style='font-size: 18px;cursor: pointer;margin-bottom: 20px;' @click='reloadData' />
        </a-tooltip>
        <a-descriptions bordered title='提交情况'>
          <a-descriptions-item label='新人注册总人数'>
            <a-badge status='processing' :text="form.registerTotal+''" />
          </a-descriptions-item>
          <a-descriptions-item label='提交人数'>
            <a-badge status='processing' :text="form.subTotal+''" />
          </a-descriptions-item>
          <a-descriptions-item label='未提交人数'>
            <a-badge status='processing' :text="form.notSubTotal+''" />
          </a-descriptions-item>
        </a-descriptions>
        <NotSub ref='NotSub' />
        <CompleteSub ref='CompleteSub' />
      </a-card>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import CompleteSub from '@/views/judge/components/CompleteSub.vue'
import NotSub from '@/views/judge/components/NotSub.vue'
import { getSubTotal } from '@/api/judge'

export default {
  components: {
    CompleteSub,
    NotSub
  },
  name: 'SubmissionList',
  data() {
    return {
      form: {},
      // 操作是否频繁
      isFrequent: false,
      spinning: false,
      clickCount: 0
    }
  },
  created() {
    this.getSubTotal()
  },
  watch: {
    isFrequent(newValue, oldValue) {
      if (newValue) {
        this.$message.error('请求过于频繁,请稍后重试')
      }
    }
  },
  methods: {
    reloadData() {
      const currentTime = Date.now()
      if (currentTime - this.lastClickTime < 4000) {
        this.clickCount++
        if (this.clickCount >= 2) {
          this.isFrequent = true
          // 在5秒后重置
          setTimeout(() => {
            this.clickCount = 0
            this.isFrequent = false
          }, 5000)
        } else {
          this.getSubTotal()
          // 通知子组件刷新数据
          this.$refs.NotSub.getSubList()
          this.$refs.CompleteSub.getSubList()
          this.$message.success('刷新成功')
        }
      } else {
        this.getSubTotal()
        // 通知子组件刷新数据
        this.$refs.NotSub.getSubList()
        this.$refs.CompleteSub.getSubList()
        this.$message.success('刷新成功')
      }
      this.lastClickTime = currentTime
    },
    getSubTotal() {
      this.spinning = true
      getSubTotal().then(response => {
        this.form = response.data
        this.spinning = false
      })
    }
  },
  filters: {},
  computed: {}
  
}
</script>

<style lang='less' scoped>
.title {
  color: rgba(0, 0, 0, .85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>
